<template>
    <div>
        <h4>{{title}}</h4>
        <div class="search">
            <a-button @click="onSelect" slot="suffix" class="search-btn" size="large" type="primary">搜索</a-button>
            <a-auto-complete
                @blur="openSarch = false"
                :open="openSarch"
                ref="search"
                class="global-search"
                size="large"
                style="width: 100%;height:100%"
                placeholder="请输入关键词"
                option-label-prop="title"
                @select="onSelect"
                @search="handleSearch"
            >
                <template slot="dataSource">
                    <a-select-option v-for="item in dataSource" :key="item.category" :title="item.category">
                        Found {{ item.query }} on
                        {{ item.category }}
                        <span class="global-search-item-count">{{ item.count }} results</span>
                    </a-select-option>
                </template>
                <a-input v-model="search.value">
                    <a-icon slot="prefix" type="search" />
                </a-input>
            </a-auto-complete>
        </div>
        <div class="list" v-show="!searchInfoVisible">
            <a-row type="flex" justify="space-around" style="padding:0 100px">
                <a-col :span="4" @click="goList(1)">
                    <img class="img1" src="@/assets/images/material/icon-1-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-1-0.png" alt />
                    <p>公开提案</p>
                </a-col>
                <a-col :span="4" @click="goList(2)">
                    <img class="img1" src="@/assets/images/material/icon-2-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-2-1.png" alt />
                    <p>社情民意</p>
                </a-col>
                <a-col :span="4" @click="goList(3)">
                    <img class="img1" src="@/assets/images/material/icon-3-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-3-1.png" alt />
                    <p>政策法规</p>
                </a-col>
            </a-row>
            <a-row type="flex" justify="space-around">
                <a-col :span="4" @click="goList(4)">
                    <img class="img1" src="@/assets/images/material/icon-4-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-4-1.png" alt />
                    <p>官网门户</p>
                </a-col>
                <a-col :span="4" @click="goList(5)">
                    <img class="img1" src="@/assets/images/material/icon-5-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-5-1.png" alt />
                    <p>官网媒体</p>
                </a-col>
                <a-col :span="4" @click="goList(6)">
                    <img class="img1" src="@/assets/images/material/icon-6-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-6-1.png" alt />
                    <p>主流媒体</p>
                </a-col>
                <a-col :span="4" @click="goList(7)">
                    <img class="img1" src="@/assets/images/material/icon-7-0.png" alt />
                    <img class="img2" src="@/assets/images/material/icon-7-1.png" alt />
                    <p>产业信息</p>
                </a-col>
            </a-row>
        </div>
        <div class="search-info" v-show="searchInfoVisible">
            <div class="search-info-top">
                <ul>
                    <li class="active">
                        <img src="@/assets/images/material/icon-1.png" alt />
                        <span>全部</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-2.png" alt />
                        <span>公开提案</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-3.png" alt />
                        <span>社情民意</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-4.png" alt />
                        <span>政策法规</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-5.png" alt />
                        <span>官网门户</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-6.png" alt />
                        <span>官网媒体</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-7.png" alt />
                        <span>主流媒体</span>
                    </li>
                    <li>
                        <img src="@/assets/images/material/icon-8.png" alt />
                        <span>产业信息</span>
                    </li>
                </ul>
            </div>
            <div class="search-content">
                <SearchListItem :data="item">
                    <template v-slot:time="slotProps">
                        <span>来源：{{slotProps.data.source}}</span>
                        <span>2020-08-20 08:10:56</span>
                    </template>
                    <template v-slot:tips>
                        <span class="type">公开提案</span>
                    </template>
                </SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <SearchListItem :data="item"></SearchListItem>
                <a-pagination size="small" :total="505" :show-total="total => `共 ${total} 条记录`" :page-size="20" :default-current="1" />
            </div>
        </div>
    </div>
</template>

<script>
import SearchListItem from "@/components/base/searchListItem";
import { paging } from "assets/js/mixin";
export default {
    mixins: [paging],
    data() {
        return {
            search: {
                value: "",
                type: 0,
            },
            dataSource: [],
            openSarch: false,
            searchInfoVisible: false,
            list: [],
            item: {
                title:
                    "提振内需大合唱 擦亮城市新招牌提振内需大合唱 擦亮城市新招牌振内需大合唱 擦亮城市新招牌擦亮城市新招牌振内需大合",
                warn: "提振内需大",
                source: "新华网",
            },
            title: "政务智库素材中心",
        };
    },
    components: {
        SearchListItem,
    },
    mounted() {},
    methods: {
        onSelect(value) {
            this.openSarch = false;
            this.$refs.search.blur();
            return false;
        },

        handleSearch(value) {
            this.openSarch = true;
            this.dataSource = value ? this.searchResult(value) : [];
            return false;
        },

        getRandomInt(max, min = 0) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },

        searchResult(query) {
            return new Array(this.getRandomInt(5))
                .join(".")
                .split(".")
                .map((item, idx) => ({
                    query,
                    category: `${query}${idx}`,
                    count: this.getRandomInt(200, 100),
                }));
        },
        goList(type) {
            this.$router.push("list/" + type);
        },
    },
    computed: {},
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
h4 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    margin-top: -40px;
    margin-bottom: 50px;
}

.search {
    position: relative;
    max-width: 700px;
    display: block;
    margin: 0 auto;
    height: 54px;
    border-radius: 27px;
    overflow: hidden;
    border: 1px solid #1692d8;

    .search-btn {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        height: 52px;
        line-height: 52px;
        width: 110px;
        text-align: center;
        font-size: 24px;
        border-radius: 27px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background: url('../../assets/images/material/search-bg.png') center no-repeat;
        background-size: cover;
        background-color: #1692d8;
        border: none;
    }

    /deep/ .ant-select-selection {
        background-color: transparent;
        border: none;
    }

    /deep/ .ant-select-selection__rendered {
        border: none;
    }

    /deep/ .ant-input {
        border: none;
        height: 54px;
        line-height: 52px;
        color: #fff;
        font-size: 18px;
        padding-left: 40px;
    }

    /deep/ .ant-input-prefix {
        color: #fff;
        font-size: 18px;
    }
}

.list {
    color: #fff;
    background-color: rgba(5, 10, 42, 0.4);
    width: 1070px;
    height: 570px;
    margin: 0 auto;
    margin-top: 70px;
    padding-top: 76px;

    .ant-col {
        text-align: center;
        font-size: 22px;
        position: relative;
        padding-top: 140px;
        cursor: pointer;
        padding-bottom: 25px;

        img {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            display: block;
            margin: 0 auto;
            transition: all 0.3s;
        }

        .img2 {
            opacity: 0;
        }

        &:hover {
            .img2 {
                opacity: 1;
            }

            .img1 {
                opacity: 0;
            }
        }
    }
}

.search-info {
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    margin-top: 40px;

    .search-content {
        background-color: #fff;
        padding: 0 30px;
        border-radius: 4px;
        max-height: 650px;
        height: 650px;
        overflow: auto;
    }
}

.ant-pagination {
    padding: 20px 0;
    text-align: right;
    position: relative;

    /deep/ .ant-pagination-total-text {
        position: absolute;
        left: 0px;
    }

    /deep/ .ant-pagination-item-active {
        border-color: #fff;
    }

    /deep/.ant-pagination-prev:hover {
        a {
            color: #fff;
        }

        background-color: #1890ff;
    }

    /deep/.ant-pagination-next:hover {
        a {
            color: #fff;
        }

        background-color: #1890ff;
    }
}

.search-info-top {
    ul {
        display: flex;
        justify-content: space-between;

        li {
            display: inline-block;
            position relative
            padding-right 6px
            span {
                color: #fff;
                font-size: 18px;
            }

            min-width: 114px;
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }

       .active,li:hover {
            border-bottom: 2px solid #5494fa;

            :after {
                content: '';
                display: inline-block;
                /* border-left:5px solid transparent;
                border-top:5px solid #fff;
                border-right:5px solid transparent;
                 border-bottom-width:0px; */
                border: 7px solid transparent;
                border-top-color: #5494fa;
                position: relative;
                bottom: -16px;
                left: 0px;
                right 0px
                width: 0px;
                height: 0px;
                position absolute
                display block
                margin 0 auto
            }
        }
    }
}
</style>
